
<template>
    <!-- 日期 -->
    <div class="dateButton">
        <el-row class="mb-4">
            <el-button>昨日 </el-button>
            <el-button type="primary">今日</el-button>
            <el-button type="primary">本月</el-button>
            <el-button>上月</el-button>

        </el-row>

        <div class="block">

            <el-date-picker v-model="value2" type="datetimerange" :shortcuts="shortcuts" range-separator="To"
                start-placeholder="Start date" end-placeholder="End date" />
        </div>

    </div>


    <!-- 列表 -->
    <!-- 
    <el-container>


        <el-main>
            <el-scrollbar> -->
    <el-table :data="tableData" :stripe="true" :highlight-current-row="true">
        <el-table-column prop="title" label="标题" hieght=50 />
        <el-table-column prop="writer" label="作者" />
        <el-table-column prop="classify" label="分类" />
        <el-table-column prop="times" label="时间" />
        <el-table-column prop="sell" label="推荐度" />
        <el-table-column prop="set" label="已发布" />
        <el-table-column prop="do" label="操作" width=220>
            <template #default="scope">
                <el-button>编辑</el-button>
                <!-- <el-popconfirm title="你确定要删除了?" @confirm="confirm(scope.row.id)" @cancel="cancel"> -->
                <!-- <template #reference> -->
                <el-button>删除</el-button>
                <!-- </template> -->
                <!-- </el-popconfirm> -->

            </template>

        </el-table-column>
    </el-table>
    <!-- </el-scrollbar>
        </el-main>
    </el-container> -->

    <!-- 分页 -->

    <el-pagination background layout="prev, pager, next" :total="1000" />
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
import axios from "axios";
import "./ts/index.ts"




const value1 = ref<[Date, Date]>([
    new Date(2000, 10, 10, 10, 10),
    new Date(2000, 10, 11, 10, 10),
])
const value2 = ref('')

const shortcuts = [
    {
        text: '一星期',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: '一季度',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
];




interface ItemType {
    id: number;
    title: string;
    writer: string;
    classify: string;
    times: string;
    sell: number;
    set: string;
}

const tableData = ref<ItemType[]>([]);
const total = ref<number>(0);


// 当前第几页
let page = 1;

onMounted(() => {
    getData();
});

const getData = () => {
    axios
        .post("/api/pos/list", {
            pageSize: 10,
            currentPage: page,
            //   search: input.value,
        })
        .then((res) => {
            tableData.value = res.data.result;
            total.value = res.data.count;
        });
};

const pageChange = (page1: number) => {
    page = page1;
    getData();
};

const search = () => {
    page = 1;
    getData();
};

const remove = (id: number) => {
    console.log(id);
};

const confirm = (id: number) => {
    console.log("确定删除", id);
    axios
        .post("/api/pos/del", {
            id: id,
        })
        .then((res) => {
            getData();
        });
};
const cancel = () => {
    console.log("取消");
};




onMounted(() => {

});



</script>
<style lang="less" scoped>
.layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}

.dateButton {
    position: relative;
    width: 100%;
    height: 60px;


    .block {
        // padding: 30px 0;
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        flex: 1;
        position: absolute;
        right: 6px;
        top: 0;

    }

    .mb-4 {
        position: absolute;
        left: 6px;
        top: 0;
    }
}



.block:last-child {
    border-right: none;
}
</style>
